<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item
        v-html="$store.state.Breadcrumb.BaiduMap"
      ></el-breadcrumb-item>
    </el-breadcrumb>
    <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-map-type>

      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
    </baidu-map>
  </div>
</template>

<script>
// //npm安装： npm install vue-baidu-map --save   // 官网： https://dafrok.github.io/vue-baidu-map/#/zh/control/navigation
//import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
//import BmScale from 'vue-baidu-map/components/controls/Scale'
//import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
//import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
//import BmMarker from 'vue-baidu-map/components/overlays/Marker'
//import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
    };
  },
  methods: {
    handler({ BMap, map }) {
      this.center.lng = 116.504;
      this.center.lat = 39.715;
      this.zoom = 15;
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    },
  },
};
</script>
<style>
.map {
  width: 100%;
  height: 800px;
}
</style>